<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Live DotNetKicks</title>
    <link rel="stylesheet" type="text/css" href="default.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="json.js"></script>
    <script type="text/javascript" src="date.js"></script>
    <script type="text/javascript" src="http://www.dotnetkicks.com/services/json/jsonservices.ashx?proxy"></script>
    <script type="text/javascript" src="html.js"></script>
    <script type="text/javascript">
function displayStories(target, stories) {
    $.each(stories, function(i, story) {
        var h = document.createElement('h3');
        var title = HTML.a(story.url);
        $(title).html(story.title);
        h.appendChild(title);
        target.appendChild(h);
        var description = HTML.p();
        $(description).html(story.description.replace(/[\n\r]/g, ''));
        target.appendChild(description);
        var info = HTML.p();
        info.appendChild(HTML.text("Published on " + Date.parseISO(story.createdOn).toLocaleString() + " by "));
        var avatar = HTML.img(story.user.avatarUrl, story.user.username);
        avatar.className = 'avatar';
        info.appendChild(avatar);
        info.appendChild(HTML.text(' '));
        info.appendChild(HTML.a(story.user.profileUrl, story.user.username));
        info.appendChild(HTML.text(" and got "));
        var kicks = HTML.span(story.kickCount + " " + (story.kickCount == 1 ? "kick" : "kicks"));
        kicks.className = 'kicks';
        info.appendChild(kicks);
        /*
        info.appendChild(HTML.p(
            HTML.a("http://www.dotnetkicks.com/kick/?url=" + encodeURIComponent(story.url), 
                HTML.img("http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=" + encodeURIComponent(story.url) + "&amp;border=&amp;fgcolor=&amp;bgcolor=&amp;cfgcolor=&amp;cbgcolor=", "kick it on DotNetKicks.com"))));
        */
        target.appendChild(info);
    });
}

function Column(e, loader) {
    
    if ('string' === typeof(e))
        e = document.getElementById(e);

    var pb = document.getElementById(e.id + 'Loading');

    this.reload = function() {
        if (pb) pb.style.display = '';
        loader(function (response) { 
            if (pb) pb.style.display = 'none';
            if (response.error) {
                alert(response.error.message);
                return;
            }
            displayStories(e, response.result.items) 
        });
    }
}

function JQueryScriptChannel() {
    this.rpc = function(call) {
        if (call.request.params.constructor === Array)
            throw new Error('Positional parameters are not supported.');
        var params = [];
        $.each(call.request.params, function(k, v) {
            if (v) params.push(k + '=' + v);
        });
        params.push('jsonp=?');
        $.getJSON(call.url + '/' + call.request.method + '?' + params.join('&'),
            function(response) {
                call.callback(response);
            }); 
    } 
}

var DNK = new JsonServices();
DNK.channel = new JQueryScriptChannel();
DNK.kwargs = true; // send args by name

$(document).ready(function() {

    var aa = document.createElement('div');
    aa.id = 'AjaxAni';
    aa.title = 'Working\u2026';
    document.body.appendChild(aa);

    $('#' + aa.id)
        .ajaxStart(function() { $(this).show(); })
        .ajaxStop (function() { $(this).hide(); });

    var cols = [ 
        new Column('FrontPage', function(cb) { return DNK.getFrontPageStories(1, 16, cb); }),
        new Column('Popular',   function(cb) { return DNK.getPopularStories(1, 16, null, cb); }),
        new Column('Upcoming',  function(cb) { return DNK.getUpcomingPageStories(1, 16, cb); })
    ];
    $.each(cols, function(i, col) { col.reload(); });
});
    </script>
</head>
<body>
    <h1><span class="alive">Live</span> Kicks! <em>alpha</em></h1>
    <div class="header">
        <p id="Lead">
            This is a sample web page that uses the 
            <a href="http://www.dotnetkicks.com/services/json/jsonservices.ashx">JSON Services</a> of 
            <a href="http://www.dotnetkicks.com/">DotNetKicks.com</a>
            to mash-up a live display using Ajax techniques 
            (<a href="http://en.wikipedia.org/wiki/Cross-site_scripting"><acronym title="cross-domain scripting">XSS</acronym></a>, 
            <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a>,
            JavaScript, DHTML, <a href="http://jquery.com/">jQuery</a> on the client
            and <a href="http://jayrock.berlios.de/">Jayrock</a> serving up from the server).
            <a href="http://code.google.com/p/dotnetkicks/downloads/list">Download now</a> for your playing pleasure.</p>
    </div>
    <div class="column" id="FrontPage">
        <h2>Front Page</h2>
        <p class="loading" id="FrontPageLoading">Loading&hellip;</p>
    </div>
    <div class="column" id="Popular">
        <h2>Popular</h2>
        <p class="loading" id="PopularLoading">Loading&hellip;</p>
    </div>
    <div class="column" id="Upcoming">
        <h2>Upcoming</h2>
        <p class="loading" id="UpcomingLoading">Loading&hellip;</p>
    </div>
</body>
</html>
